import React,{forwardRef , useImperativeHandle} from 'react';
import { Form, Input } from 'antd';
const FormComponent = ({labels},ref) => {

  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  useImperativeHandle(ref,() =>({
    form,
  }))
  return (
    <Form
      form={form}
      name="basic"
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 9,
      }}
      initialValues={{}}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label={labels.label1+":"}
        name={labels.label1}
        rules={[
          {
            required: true,
            message: 'Please input your '+ labels.label1 + "!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label={labels.label2 + ":"}
        name={labels.label2}
        hasFeedback
        rules={[
          {
            required: true,
            message: 'Please input your '+ labels.label2 + "!",
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label={labels.label3 + ":"}
        name={labels.label3}
        hasFeedback
        dependencies={[labels.label2]}
        rules={[
          {
            required: true,
            message: 'Please input your '+ labels.label3 + "!",
          },
          ({ getFieldValue }) => ({
            validator(_, value) {
              if (!value || getFieldValue(labels.label2) === value) {
                return Promise.resolve();
              }
              return Promise.reject(new Error(labels.label1==="기존 전화번호"?'입력하신 전화번호가 동일하지 않습니다.!':"입력하신 비밀번호가 동일하지 않습니다.!"));
            },
          }),
        ]}
      >
        <Input />
      </Form.Item>
    </Form>
  );
};
export default forwardRef(FormComponent);